<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=false"
    />
    <title>高阶函数</title>
  </head>
  <body></body>
  <script>
    // //   从小到大
    // [1, 5, 3].sort(function (a, b) {
    //   return a - b;
    // });
    // Function.prototype.before = function (beforefn) {
    //   console.log(this);
    //   //   此处this指向原函数
    //   var __self = this;
    //   return function () {
    //     //   此处this指向window
    //     console.log(this);
    //     beforefn.apply(this, arguments); //   执行新函数,修正this指向
    //     return __self.apply(this, arguments); //执行旧函数
    //   };
    // };
    // Function.prototype.after = function (afterfn) {
    //   var __self = this;
    //   return function () {
    //     var ret = __self.apply(this, arguments); //执行旧函数
    //     afterfn.apply(this, arguments); //执行新函数
    //     return ret; //返回旧函数
    //   };
    // };
    // var func = function () {
    //   console.log(2);
    // };
    // func = func
    //   .before(function () {
    //     console.log(1);
    //   })
    //   .after(function () {
    //     console.log(3);
    //   });
    // func();

    var timeChunk = function (ary, fn, count) {
      var obj, t;
      var len = ary.length;
      var start = function () {
        for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
          var obj = ary.shift();
          fn(obj);
        }
      };
      return function () {
        t = setInterval(function () {
          if (ary.length === 0) {
            // 如果全部节点都已经被创建好
            return clearInterval(t);
          }
          start();
        }, 200); // 分批执行的时间间隔，也可以用参数的形式传入
      };
    };
    var ary = [];
    for (var i = 1; i <= 1000; i++) {
      ary.push(i);
    }
    var renderFriendList = timeChunk(
      ary,
      function (n) {
        var div = document.createElement("div");
        div.innerHTML = n;
        document.body.appendChild(div);
      },
      8
    );
    renderFriendList();
  </script>
</html>
